<template>
  <div class="home-view">
    <!-- 头部 -->
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-header style="height: 60px; line-height: 60px; background-color: #409EFF; color: #fff; padding-left: 20px; display: flex; justify-content: space-between; align-items: center;">
        <span><i class="el-icon-house"></i> 熙心健康管理系统</span>
        <div style="display: flex; align-items: center;">
          <span style="margin-right: 20px;">系统管理员：{{ userName }}</span>
          <el-button type="danger" size="small" @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px" style="background-color: #333; color: #fff;">
          <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect" background-color="#333" text-color="#fff" active-text-color="#409EFF">
            <el-menu-item index="1">
              <i class="el-icon-house"></i>
              <router-link to="/first">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-date"></i>
              <router-link to="/emp">体检预约</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-s-order"></i>
              <router-link to="/dept">预约列表</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-search"></i>
              <router-link to="/find">体检客户查询</router-link>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main style="padding: 20px;">
          <!-- 顶部卡片统计 -->
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card shadow="hover" style="height: 100px; text-align: center; display: flex; justify-content: center; align-items: center;">
                <div style="display: inline-block; margin: 0 20px; color: #fff; background-color: #409EFF; width: 50px; height: 50px; border-radius: 5px; line-height: 50px;">
                  <i class="el-icon-user"></i>
                </div>
                <div>
                  <h2>103</h2>
                  <p>用户总数</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover" style="height: 100px; text-align: center; display: flex; justify-content: center; align-items: center;">
                <div style="display: inline-block; margin: 0 20px; color: #fff; background-color: #67C23A; width: 50px; height: 50px; border-radius: 5px; line-height: 50px;">
                  <i class="el-icon-s-promotion"></i>
                </div>
                <div>
                  <h2>203</h2>
                  <p>预约总数</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover" style="height: 100px; text-align: center; display: flex; justify-content: center; align-items: center;">
                <div style="display: inline-block; margin: 0 20px; color: #fff; background-color: #E6A23C; width: 50px; height: 50px; border-radius: 5px; line-height: 50px;">
                  <i class="el-icon-s-shop"></i>
                </div>
                <div>
                  <h2>303</h2>
                  <p>体检完成数</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card shadow="hover" style="height: 100px; text-align: center; display: flex; justify-content: center; align-items: center;">
                <div style="display: inline-block; margin: 0 20px; color: #fff; background-color: #F56C6C; width: 50px; height: 50px; border-radius: 5px; line-height: 50px;">
                  <i class="el-icon-data-line"></i>
                </div>
                <div>
                  <h2>403</h2>
                  <p>数据统计</p>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 中间图表区域 -->
          <el-row :gutter="20" style="margin-top: 20px;">
            <el-col :span="8">
              <el-card shadow="hover">
                <div slot="header" class="chart-header">用户访问来源</div>
                <div id="userReferralPieChart" style="height: 400px;"></div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div slot="header" class="chart-header">体检项统计</div>
                <div id="examItemBarChart" style="height: 400px;"></div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover">
                <div slot="header" class="chart-header">体检项目占比</div>
                <div id="examItemPolarChart" style="height: 400px;"></div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 底部折线图 -->
          <el-card style="margin-top: 20px;">
            <div slot="header" class="chart-header">各店全年销售额</div>
            <div id="storeSalesLineChart" style="height: 400px;"></div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'HomeView',
  data() {
    return {
      userName: 'admin',
      activeIndex: '1', // 默认激活第一个菜单项
    };
  },
  methods: {
    logout() {
      this.$message.success('退出成功！');
      this.$router.push('/login');
    },
    handleSelect(index) {
      this.activeIndex = index;
    },
    initCharts() {
      // 1.用户访问来源（饼图）
      const referralPieChart = echarts.init(document.getElementById('userReferralPieChart'));
      referralPieChart.setOption({
        title: { text: '用户访问来源' },
        tooltip: {},
        legend: { data: ['视频广告', '搜索引擎', '联盟推荐', '直接访问', '口碑推荐'], textStyle: { color: '#333' } },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 335, name: '视频广告' },
              { value: 310, name: '搜索引擎' },
              { value: 233, name: '联盟推荐' },
              { value: 135, name: '直接访问' },
              { value: 1548, name: '口碑推荐' },
            ],
            label: { show: true, color: '#fff' },
            labelLine: { show: true },
            itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
          },
        ],
      });

      // 2.体检项统计（柱状图）
      const examItemBarChart = echarts.init(document.getElementById('examItemBarChart'));
      examItemBarChart.setOption({
        title: { text: '体检项统计' },
        tooltip: {},
        legend: { data: ['20-30', '31-40', '41-50', '51-60', '61-70'], textStyle: { color: '#333' } },
        xAxis: { type: 'category', data: ['第一季度', '第二季度', '第三季度', '第四季度'], axisLabel: { color: '#333' } },
        yAxis: { type: 'value', axisLabel: { color: '#333', formatter: '{value} 项' } },
        series: [
          { name: '20-30', type: 'bar', stack: 'age', data: [2, 4, 7, 10], color: '#90EE90' },
          { name: '31-40', type: 'bar', stack: 'age', data: [4, 7, 10, 12], color: '#6B8E23' },
          { name: '41-50', type: 'bar', stack: 'age', data: [6, 8, 10, 11], color: '#FFD700' },
          { name: '51-60', type: 'bar', stack: 'age', data: [8, 10, 12, 13], color: '#FFA07A' },
          { name: '61-70', type: 'bar', stack: 'age', data: [10, 12, 13, 15], color: '#00BFFF' },
        ],
      });

      // 3.体检项目占比（玫瑰图）
      const examItemPolarChart = echarts.init(document.getElementById('examItemPolarChart'));
      examItemPolarChart.setOption({
        title: { text: '体检项目占比' },
        tooltip: {},
        legend: { data: ['基础项', '肺部CT', '甲状腺彩超', '肝功化验', '心脏彩超'], textStyle: { color: '#333' } },
        radar: {
          indicator: [
            { name: '基础项', max: 6500 },
            { name: '肺部CT', max: 16000 },
            { name: '甲状腺彩超', max: 30000 },
            { name: '肝功化验', max: 38000 },
            { name: '心脏彩超', max: 52000 },
          ],
          axisName: { color: '#fff' },
        },
        series: [
          {
            name: '体检项目占比',
            type: 'radar',
            itemStyle: { color: '#409EFF' },
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000],
                name: '当前数据',
              },
            ],
          },
        ],
      });

      // 4.各店全年销售额（折线图）
      const storeSalesLineChart = echarts.init(document.getElementById('storeSalesLineChart'));
      storeSalesLineChart.setOption({
        title: { text: '各店全年销售额' },
        tooltip: { trigger: 'axis' },
        legend: { data: ['浑南店', '市府广场店', '三好街店', '沈北店', '沈河店'], textStyle: { color: '#333' } },
        xAxis: { type: 'category', boundaryGap: false, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], axisLabel: { color: '#333' } },
        yAxis: { type: 'value', axisLabel: { color: '#333', formatter: '{value} 万元' } },
        series: [
          { name: '浑南店', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90], areaStyle: {}, itemStyle: { color: '#409EFF' } },
          { name: '市府广场店', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290], areaStyle: {}, itemStyle: { color: '#67C23A' } },
          { name: '三好街店', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190], areaStyle: {}, itemStyle: { color: '#E6A23C' } },
          { name: '沈北店', type: 'line', stack: '总量', data: [320, 332, 301, 334, 390, 330, 320], areaStyle: {}, itemStyle: { color: '#F56C6C' } },
          { name: '沈河店', type: 'line', stack: '总量', data: [820, 932, 901, 934, 1290, 1330, 1320], areaStyle: {}, itemStyle: { color: '#D9534F' } },
        ],
      });
    },
  },
  mounted() {
    this.initCharts();
  },
};
</script>

<style scoped>
.home-view {
  height: 100vh;
  display: flex;
}

.el-header {
  background-color: #409EFF;
  color: #fff;
}

.el-aside {
  background-color: #333;
  color: #fff;
}

.el-main {
  background-color: #f0f2f5;
}

.el-menu {
  border-right: none;
}

.el-menu-item a {
  color: #fff;
  text-decoration: none;
}

.el-menu-item a:hover {
  color: #409EFF;
}

.el-menu-item.is-active a {
  color: #409EFF;
  font-weight: bold;
}

.el-menu-item.is-active {
  background-color: #4a4a4a;
}

.chart-header {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.el-card {
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-card h2 {
  margin: 0;
  font-size: 24px;
}

.el-card p {
  margin: 0;
  font-size: 12px;
}

/* 图表样式 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>
